<template>
  <Spin :spinning="loading" tip="Loading...">
    <div>
      <!-- 搜索 -->
      <!-- 故障件统计--厂端 -->
      <TopFilter ref="TopFilterss" :list="topFilterInit" :cols="3" :collapse="collapse" labelWidth="120" @filterChange="changeHandle" @resetChange="resetHandle"></TopFilter>
      <!-- table -->
      <FilterTable
        ref="table"
        :columns="columns"
        :params="fetchParams"
        :dataSource="dataList"
        :fetchapi="fetchApi"
        :datakey="'records'"
        :onColumnsChange="columns => (this.columns = columns)"
        :onRowSelectChange="selectChange"
        :is-select-column="false"
        columnsRef="ClaimQueryFactorylgr"
      >
        <template slot="controls" slot-scope="props">
          <multiuse-button size="small" type="primary" :click="exportFileBtn.bind()">导出</multiuse-button>
          <!--        <multiuse-button size="small">导入</multiuse-button>-->
        </template>
      </FilterTable>
      <BaseDialog :visible.sync="visibleEdit" :title="'故障件各行驶里程的故障频次'" width="850px" destroyOnClose
                  :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
        <editForm @close="editclose" @save="editsave" :rowData="rowData" :isDetailed="isDetailed"></editForm>
      </BaseDialog>
    </div>
  </Spin>
</template>
<script>
import { getFaultPartReportPage,getFaultPartListForExport} from '@/api/claim/factory/ClaimCheckReport/index';
import ModelVehicle from '@/pages/claimDemage/tools/ModelVehicle.vue';
import editForm from './editForm.vue';
import { exportExcelFile } from '@/utils/index';
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
import {getModelAll} from '@/api/cms-common/basedata';
export default {
  name:'FaultPartReport',
  mixins: [dictionary],
  components: {
    ModelVehicle,
    editForm
  },
  data() {
    return {
      // 非单个禁用
      // single: true,
      single: false,
      // 非多个禁用
      multiple: true,
      loading: false,
      dataList: [],
      boHuiAdd: false,
      visible: false,
      visibleDrawer: false,
      collapse: true,
      infoId: null,
      suppliers:false,
      topFilterInit: this.topFilterInitFun(),
      flterValue: {}, //参数
      fetchApi: getFaultPartReportPage,
      columns: this.creatHeader(),
      fetchParams: {xhrAbort: true,moveFlag:1 }, //ipa 接口
      selectedRows: [], //选中服务中心
      dialogTitle: '选择车辆',
      visibleAdd: false,
      visibleEdit: false,
      rowData: {},
      isDetailed:null,
    };
  },
  created() {

    this.fetchParams.beginDate = moment()
      .startOf('week')
      .format('YYYY-MM-DD HH:mm:ss');
    this.fetchParams.endDate = moment()
      .endOf('week')
      .format('YYYY-MM-DD HH:mm:ss');
    this.chuqi();
  },
  mounted(){
  },
  methods: {
    //搜索数据
    topFilterInitFun() {
      return [

        {
          type: 'RANGE_DATE',
          label: '索赔单提报日期',
          fieldName: 'beginDate|endDate',
          placeholder: '请输入',
          initialValue: [
            moment(new Date()).subtract(1,'months')
              .format("YYYY-MM-DD"),
            moment(new Date())
              .format("YYYY-MM-DD")
          ],
          // maxDateTime:moment().subtract(1,'days'),
          rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        { type: 'SELECT', label: '车型名称', fieldName: 'modelCode', placeholder: '请选择', initialValue: '', itemList: this.getModel() },
        { type: 'INPUT', label: '备件代码', fieldName: 'partCode', placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '备件名称', fieldName: 'partName', placeholder: '请输入', initialValue: '' },
        ,
      ];
    },
    //搜索获取数据
    changeHandle(val) {

      val.beginDate = this.topFilterInit.find(x => x.fieldName == 'beginDate|endDate').initialValue[0];
      val.endDate = this.topFilterInit.find(x => x.fieldName == 'beginDate|endDate').initialValue[1];
      if(val.beginDate) {
        val.beginDate = moment(val.beginDate).format('YYYY-MM-DD HH:mm:ss');
      }
      if(val.endDate) {
        val.endDate = moment(val.endDate).format('YYYY-MM-DD HH:mm:ss');
      }
      this.fetchParams = Object.assign({}, this.fetchParams, val, { xhrAbort: false,moveFlag:1  });
      // this.SELECT();
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        { title: '车型', dataIndex: 'modelName', sorter: true },
        { title: '备件代码', dataIndex: 'partCode', sorter: true },
        { title: '备件名称', dataIndex: 'partName', sorter: true },
        { title: '年月故障数', dataIndex: 'faultNum', sorter: true },
        {
          title: '故障件各行驶里程的故障频次',
          align: 'center',
          children: [
            { title: '1-5000', dataIndex: 'faultNum1', align: 'center'},
            { title: '5001-30000', dataIndex: 'faultNum2', align: 'center' },
            { title: '30001-60000', dataIndex: 'faultNum3', align: 'center' },
            { title: '60001-80000', dataIndex: 'faultNum4', align: 'center'},
            { title: '80001-100000', dataIndex: 'faultNum5', align: 'center' },
            { title: '100001-120000', dataIndex: 'faultNum6', align: 'center' },
            { title: '120001-140000', dataIndex: 'faultNum7', align: 'center' },
            { title: '140001-160000', dataIndex: 'faultNum8', align: 'center' },
            { title: '160001-180000', dataIndex: 'faultNum9', align: 'center' },
            { title: '180001-200000', dataIndex: 'faultNum10', align: 'center' },
            { title: '200000以上', dataIndex: 'faultNum11', align: 'center' },
          ]
        },
        // {
        //   title: '年月故障数',
        //   dataIndex: 'faultNum',
        //   render: props => {
        //     return (
        //       <div style="text-align:center">
        //         <multiuse-button size="mini" type="text" onClick={() => this.edit(props.row)}>
        //           {props.row.faultNum}
        //         </multiuse-button>
        //       </div>
        //     );
        //   }
        // },


      ];
    },
    async chuqi() {
      console.log('进来了');

    },
    //获取所有车型
    async getModel() {
      let res = await getModelAll();
      if (res.resultCode === 200) {
        this.topFilterInit.find(item => item.fieldName === 'modelCode').itemList = res.data.map(x => ({text:x.modelName,value:x.modelCode}));

      }
    },
    resetHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val, { xhrAbort: false });
    },

    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      console.log(this.selectedRows);
    },
    chooseOrderNo() {
      this.visible = true;
    },
    chooseDealerNo() {
      this.visibleAdd = true;
    },

    save(obj) {
      this.topFilterInit.find(x => x.fieldName == 'modelCode').initialValue = obj[0].modelCode;
      this.visible = false;
    },
    async exportFileBtn() {

      let beginDate = this.topFilterInit.find(x => x.fieldName == 'beginDate|endDate').initialValue[0];
      let endDate = this.topFilterInit.find(x => x.fieldName == 'beginDate|endDate').initialValue[1];
      if (!beginDate) {
        this.$notify.warning({ title: '提示信息', message: '开始日期不可为空！' });
        return;
      }
      if (!endDate) {
        this.$notify.warning({ title: '提示信息', message: '结束日期不可为空！' });
        return;
      }

      let obj = Object.assign({}, this.fetchParams, { xhrAbort: false });

      obj.beginDate = this.topFilterInit.find(x => x.fieldName == 'beginDate|endDate').initialValue[0];
      obj.endDate = this.topFilterInit.find(x => x.fieldName == 'beginDate|endDate').initialValue[1];

      if(obj.beginDate) {
        obj.beginDate = moment(obj.beginDate).format('YYYY-MM-DD HH:mm:ss');
      }
      if(obj.endDate) {
        obj.endDate =  moment(obj.endDate).format('YYYY-MM-DD HH:mm:ss');
      }
      this.loading = true;
      getFaultPartListForExport(obj).then(res => {
        exportExcelFile(res.data, '故障件统计');
        this.loading = false;
      });
    },
    add() {
      this.visibleAdd = true;
    },
    // saveAdd() {
    //   this.visibleAdd = false;
    //   this.fetchParams = { ...this.fetchParams };
    // },
    editclose() {
      this.visibleEdit = false;
      this.isDetailed = false;
    },
    edit(val) {
      this.rowData = val;
      this.visibleEdit = true;
      this.isDetailed = true;

    },

    editsave() {
      this.visibleEdit = false;
      this.fetchParams = { ...this.fetchParams };
    }

  }
  // mounted() {
  //   this.BaseTable = this.$refs.listModal.$refs.pageTable;
  // }
};
</script>

<style lang="less" scoped></style>
